// 1、定义一个用户的切片
import { createSlice } from '@reduxjs/toolkit'
const userSlice = createSlice({
    name: 'user',
    initialState: {
        userInformation: localStorage.getItem("userInformation") ? JSON.parse(localStorage.getItem("userInformation")) : {}
    },
    reducers: { //定义的都是函数，对initialState里面的数据进行修改
        // 添加用户信息函数
        addUser(state, action) {
            // redux 也是强调数据的不可变，redux 通过immer 来保证数据的不可变
            state.userInformation = action.payload
            localStorage.setItem('userInformation', JSON.stringify(action.payload))
        },
        // 添加浏览记录
        addHistory(state, action) {
            // 这个action单接收一个商品id
            let user1 = state.userInformation

            // 如果没有浏览历史字段
            if (!user1.browsingHistory) {
                user1.browsingHistory = []
                user1.browsingHistory.push(action.payload)
                state.userInformation = user1
            } else {
                let findindex = user1.browsingHistory.indexOf(action.payload)
                // 如果列表中没有这个商品id那么直接添加
                if (findindex === -1) {
                    user1.browsingHistory.unshift(action.payload)
                    state.userInformation = user1
                } else {
                    // 如果有的话，提升到第一个
                    user1.browsingHistory.splice(findindex, 1)
                    user1.browsingHistory.unshift(action.payload)
                    state.userInformation = user1
                }
            }
        },
        // 新增的 reducer 函数，用于更新手机号和密码
        addLoginInfo(state, action) {
            state.phone = action.payload.phone;
            state.passWord = action.payload.password;
        }
    }
})
// 对生成的action 和reduce进行导出
export const { addUser, addHistory } = userSlice.actions //导出reducers里面的函数
export default userSlice.reducer


// // 使用方法  下面是一个完整的组件
// import {useSelector,useDispatch}from 'react-redux'
// import {修改方法}  from '../store/userSlice'
// export default function Child3(){
//      导入数据
//     const data=useSelector(store=>store.user.数据名称)
//     const dispach=useDispatch()
//     return <>
//         {data}
//             addUser是一个修改方法，传一个要修改的值
//         <button onClick={()=>dispach(addUser({}))}>修改</button>
//     </>
// }